<template>  
  <ul>  
    <todo-item  
      v-for="todo in todos"  
      :key="todo.id"  
      :todo="todo"  
      @delete="removeTodo"  
    ></todo-item>  
  </ul>  
</template>  
  
<script>  
import TodoItem from './TodoItem.vue';  
  
export default {  
  components: {  
    TodoItem  
  },  
  props: ['todos'],  
  methods: {  
    removeTodo(id) {  
      this.$emit('update', this.todos.filter(todo => todo.id !== id));  
    }  
  }  
};  
</script>